<template>
  <div class="login-account">
    <el-form label-width="70px" :model="account" ref="formRef" :rules="rules">
      <el-form-item label="账号" prop="name">
        <el-input v-model="account.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password />
      </el-form-item>
      <el-form-item label="验证码" prop="sms" class="sms-style">
        <el-input
          v-model="account.sms"
          class="el-input-sms"
          style="width: 60%"
        />
        <el-image
          style="width: 80px; height: 30px"
          :src="imgUrl"
          @click="LoginImgReq"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { ElForm } from "element-plus";
import { useStore } from "vuex";
import { defineComponent, reactive, ref, computed, onMounted } from "vue";
import { rules } from "../config/account-config";
import LocalCache from "@/utils/cache";
import { h } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  setup() {
    onMounted(() => {
      LoginImgReq();
    });
    const store = useStore();
    const imgUrl = computed(() => {
      return store.state.login.imgUrl == ""
        ? "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        : store.state.login.imgUrl;
    });
    // 获取表单的值
    const formRef = ref<InstanceType<typeof ElForm>>();
    const account = reactive({
      name: LocalCache.getCache("account") ?? "",
      password: LocalCache.getCache("password") ?? "",
      sms: "",
      key: ""
    });
    const LoginAction = (isKeeppassWord: boolean) => {
      console.log(store);
      console.log(store.state.login.imgUrl);
      // 获取表单的值调用valudate函数返回布尔值
      formRef.value?.validate((valid) => {
        if (valid) {
          // 1.判断是否需要记住密码
          if (isKeeppassWord) {
            // 本地缓存
            console.log(123);
            LocalCache.setCache("account", account.name);
            LocalCache.setCache("password", account.password);
          } else {
            LocalCache.deleteCache("account");
            LocalCache.deleteCache("password");
          }
          // 2开始进行登录验证（？）
          store.dispatch("login/accountLoginAction", { ...account });
        } else {
          ElMessage({
            message: h("p", null, [
              h("span", null, "内容填写"),
              h("i", { style: "color: teal" }, "不完整!")
            ])
          });
        }
      });
    };
    const LoginImgReq = () => {
      // 开始进行验证码
      // 生成随机数
      const str = "0123456789qazwsxedcrfvtgbyhnujmkilop";
      let key = "";
      if (!account.key) {
        for (let i = 6; i > 0; --i) {
          key += str[Math.floor(Math.random() * 6)];
        }
        account.key = key;
      }
      store.dispatch("login/accountImgAction", { ...account });
    };
    return {
      account,
      rules,
      LoginAction,
      formRef,
      LoginImgReq,
      imgUrl
    };
  }
});
</script>

<style scoped lang="less">
.sms-style {
  display: flex;
  flex-wrap: nowrap;
  /deep/ .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    line-height: 32px;
    position: relative;
    font-size: var(--font-size);
    min-width: 0;
    align-content: stretch;
    justify-content: space-between;
  }
}
</style>
